import React, { useEffect, useState, } from 'react';
import { Breadcrumb, Input, Button, Table,Switch } from 'antd';
import '../../../views/Index/Role/Role.scss'
import { PlusOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom'
import type { ColumnsType } from 'antd/es/table';
import service from '../../../api';

interface Props {

}

interface DataType {
    key: React.Key;
    name: string;
    people: number;
    ming: string;
    said:string
    add:string
    time:string
}

function Role(props: Props) {

    const [list, setlist] = useState<DataType[]>([])

    const navigate = useNavigate()
    const tiao = () => {
        navigate('/index/roleadd')
    }
    
    const res1 = async ()=>{
        const res = await service.role.role_list()
        console.log(res);
        setlist(res.data)
    }
    useEffect(()=>{
        res1()
    },[])

    //开关
    const onChange = (checked: boolean) => {
        console.log(`switch to ${checked}`);
    };

    const columns: ColumnsType<DataType> = [
        {
            title: '角色名称',
            dataIndex: 'ming',
            key:'ming',
            render:(_,record) => <span>{record.ming}</span>
        },
        {
            title: '角色描述',
            dataIndex: 'said',
            key:'said',
            render:(_,record) => <span>{record.said}</span>
        },
        {
            title: '角色人数',
            dataIndex: 'people',
            key:'people',
            render:(_,record)=><span>{record.people}</span>
        },
        {
            title: '状态',
            dataIndex: '1',
            key:'1',
            render: (_, record) => <p>{<Switch defaultChecked onChange={onChange} />}</p>
        },
        {
            title: '添加人',
            dataIndex: 'add',
            key:'add',
            render:(_,record)=><span>{record.add}</span>
        },
        {
            title: '添加时间',
            dataIndex: 'time',
            key:'time',
            render:(_,record)=><span>{record.time}</span>
        },
        {
            title: '操作',
            render: (_, record) => {
                return <>
                    <div className="handle">
                        <Button>编辑</Button>
                        <Button>删除</Button>
                    </div>
                </>
            }
        },
    ];

    const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
    const [loading, setLoading] = useState(false);

    const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
        console.log('selectedRowKeys changed: ', newSelectedRowKeys);
        setSelectedRowKeys(newSelectedRowKeys);
    };

    const rowSelection = {
        selectedRowKeys,
        onChange: onSelectChange,
    };
    return (
        <div className='role'>
            <div className="one">
                <Breadcrumb>
                    <Breadcrumb.Item>
                        <a href="">设置</a>
                    </Breadcrumb.Item>
                    <Breadcrumb.Item>
                        <a href="">角色管理</a>
                    </Breadcrumb.Item>
                </Breadcrumb>
                <p>角色管理</p>
                <div className="sou">
                    <div className="left">
                        <span>角色名称:</span>
                        <Input placeholder="请输入" />
                    </div>
                    <div className="right">
                        <Button type="primary">查询</Button>
                        <Button>重置</Button>
                    </div>
                </div>
                <div className="two">
                    <div className="top">
                        <header>角色列表</header>
                        <div className="you">
                            <Button onClick={tiao} type="primary"><PlusOutlined />新建</Button>
                            <Button>批量操作</Button>
                        </div>
                    </div>
                </div>
                <div className="taber">
                    <Table rowSelection={rowSelection} columns={columns} dataSource={list}/>
                </div>
            </div>
        </div>
    );
}

export default Role;